<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar :title="currentOption.name" type="1" :selectList="stup1Option" selectKey="name"
			@selectChange="handleDevChange"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<view class="stup1-cont" v-if="currentOption.index<0">
				<view v-for="(item,index) in stup1Option" :key="index" class="option-item" @tap="toStup2(index)">
					<view :class="['iconfont', item.iconPath, 'option-item-icon']"></view>
					<text class="option-item-name">{{item.name}}</text>
				</view>
			</view>
			<view class="stup2-cont" v-else>
				<!-- 项目切换 -->
				<view class="project-select" @click="handleOpen">
					<view class="project-name">{{deviceInfo!=null?deviceInfo.name:""}}</view>
					<image class="project-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'">
					</image>
				</view>

				<view class="datetime-cont" :style="{marginTop:'20rpx',marginLeft:'20rpx',marginRight:'20rpx'}">
					<uni-datetime-picker v-model="currentTime" type="date" :clear-icon="false" :leftIcon="false"
						@change="handleDateChange" rangeSeparator="至" :border="false" :value="currentTime" />
				</view>

				<view v-show="currentOption.index==0">
					<view class="chan-item" v-if="menKeys.length>0">
						<text class="chan-item-name">库门状态</text>
						<view class="chan-item-stat">
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计开门时长：</text>
								<text
									class="chan-item-stat-item-value">{{menStat.shichang?getDurationBySeconds(menStat.shichang):"0"}}</text>
							</view>
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计开门次数：</text>
								<text class="chan-item-stat-item-value">{{menStat.cishu?menStat.cishu:"0"}}次</text>
							</view>
						</view>
						<view class="chan-item-stat-dev" v-for="(item,index) in menInfo" :key="index">
							<text class="chan-item-stat-dev-name">{{item.name}}</text>
							<view class="chan-item-stat">
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计开门时长：</text>
									<text
										class="chan-item-stat-item-value">{{item.t?getDurationBySeconds(item.t):"0"}}</text>
								</view>
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计开门次数：</text>
									<text class="chan-item-stat-item-value">{{item.c?item.c:"0"}}次</text>
								</view>
							</view>

							<view class="chan-item-legend">
								<view class="chan-item-legend-item" v-for="(chanItem,chanIndex) in kaiguanTypes"
									:key="chanIndex">
									<text class="chan-item-legend-name">{{chanItem.name}}</text>
									<view class="chan-item-legend-icon" :style="{backgroundColor:chanItem.color}">
									</view>
								</view>
							</view>

							<view class="chan-item-stat-chart">
								<StatChart class="chart" :chartData="item" :type="kaiguanTypes"
									:ref="(el) => setMenChartRef(el,index)">
								</StatChart>
							</view>
						</view>

					</view>

					<view class="chan-item" v-if="fengjiKeys.length>0">
						<text class="chan-item-name">风机状态</text>

						<view class="chan-item-stat">
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计制冷时长：</text>
								<text
									class="chan-item-stat-item-value">{{fengjiStat.zhileng?fengjiStat.zhileng.toFixed(2):"0"}}h</text>
							</view>
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计化霜时长：</text>
								<text
									class="chan-item-stat-item-value">{{fengjiStat.huashuang?fengjiStat.huashuang.toFixed(2):"0"}}h</text>
							</view>
						</view>
						<view class="chan-item-stat-dev" v-for="(item,index) in fengjiInfo" :key="index">
							<text class="chan-item-stat-dev-name">{{item.name}}</text>
							<view class="chan-item-stat">
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计制冷时长：</text>
									<text class="chan-item-stat-item-value">{{item.zlsc?item.zlsc:"0"}}h</text>
								</view>
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计化霜时长：</text>
									<text class="chan-item-stat-item-value">{{item.hssc?item.hssc:"0"}}h</text>
								</view>
							</view>

							<view class="chan-item-legend">
								<view class="chan-item-legend-item" v-for="(chanItem,chanIndex) in fengjiTypes"
									:key="chanIndex">
									<text class="chan-item-legend-name">{{chanItem.name}}</text>
									<view class="chan-item-legend-icon" :style="{backgroundColor:chanItem.color}">
									</view>
								</view>
							</view>

							<view class="chan-item-stat-chart">
								<StatChart class="chart" :chartData="item" :type="fengjiTypes"
									:ref="(el) => setFengjiChartRefs(el,index)">
								</StatChart>
							</view>
						</view>
					</view>

					<view class="chan-item">
						<text class="chan-item-name">冷库温度曲线</text>
						<view :style="{marginTop:'20rpx'}">
							<DataChart class="chart" :chartData="wenduInfo" />
						</view>
					</view>
				</view>


				<view v-show="currentOption.index==1">
					<view class="chan-item">
						<text class="chan-item-name">压缩机状态</text>
						<view class="chan-item-stat">
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计运行时长：</text>
								<text
									class="chan-item-stat-item-value">{{yasuojiStat.shichang?yasuojiStat.shichang:"0"}}h</text>
							</view>
							<view class="chan-item-stat-item">
								<text class="chan-item-stat-item-name">累计启停次数：</text>
								<text
									class="chan-item-stat-item-value">{{yasuojiStat.cishu?yasuojiStat.cishu:"0"}}次</text>
							</view>
						</view>
						<view class="chan-item-stat-dev" v-for="(item,index) in yasuojiInfo" :key="index">
							<text class="chan-item-stat-dev-name">{{item.name}}</text>
							<view class="chan-item-stat">
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计运行时长：</text>
									<text class="chan-item-stat-item-value">{{item.t?item.t:"0"}}h</text>
								</view>
								<view class="chan-item-stat-item">
									<text class="chan-item-stat-item-name">累计启停次数：</text>
									<text class="chan-item-stat-item-value">{{item.c?item.c:"0"}}次</text>
								</view>
							</view>

							<view class="chan-item-legend">
								<view class="chan-item-legend-item" v-for="(chanItem,chanIndex) in kaiguanTypes"
									:key="chanIndex">
									<text class="chan-item-legend-name">{{chanItem.name}}</text>
									<view class="chan-item-legend-icon" :style="{backgroundColor:chanItem.color}">
									</view>
								</view>
							</view>

							<view class="chan-item-stat-chart">
								<StatChart class="chart" :chartData="item" :type="kaiguanTypes"
									:ref="(el) => setYasuojiChartRefs(el,index)">
								</StatChart>
							</view>
						</view>

					</view>
					<view class="chan-item">
						<text class="chan-item-name">压缩机参数曲线</text>
						<view :style="{marginTop:'20rpx'}">
							<DataChart class="chart" :chartData="yasuojiInfo" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in deviceList" :key="index"
					@click="handleTypeChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, onMounted, getCurrentInstance, onBeforeUpdate } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useUserStore from '@/store/user.js';
	import useHomeStore from '@/store/home';
	import StatChart from "./components/stat-chart.vue"
	import DataChart from "./components/stat-data-chart.vue"
	import useThemeStore from '@/store/theme';
	const homeStore = useHomeStore();
	const themeStore = useThemeStore();
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	const { projectId } = storeToRefs(homeStore);
	const { proxy } = getCurrentInstance();
	import * as dataApi from '@/api/data.js'

	onLoad(() => {

	});

	const currentOption = ref({ index: -1, name: "数据统计" })
	const stup1Option = ref([{ name: "冷库", iconPath: "icon-lengku", index: 0 }, { name: "机组", iconPath: "icon-jizu", index: 1 }])

	const fengjiTypes = ref([
		{ name: '化霜', color: '#BCCAFA', type: "key_1" },
		{ name: '制冷', color: '#99F0EB', type: "key_0" },
		{ name: '待机', color: '#D2D2D2', type: "key_2" },
		// { name: '化霜', color: '#BCCAFA', type: "0" },
		// { name: '制冷', color: '#99F0EB', type: "1" },
		// { name: '待机', color: '#D2D2D2', type: "2" }
	]);

	const kaiguanTypes = ref([
		{ name: '关', color: '#FFBB73', type: "key_close" },
		{ name: '开', color: '#86D06A', type: "key_open" },
	]);

	const devItem = ref();
	const menKeys = ref([]);
	const menInfo = ref([]);
	const menStat = ref({ shichang: 0, cishu: 0 })
	const fengjiKeys = ref([]);
	const fengjiInfo = ref([]);
	const fengjiStat = ref({ huashuang: 0, zhileng: 0 })
	const wenduKeys = ref([]);
	const wenduInfo = ref([]);

	const yasuojiKeys = ref([]);

	const yasuojiInfo = ref([]);
	const yasuojiStat = ref({ shichang: 0, cishu: 0 })

	const menChartRefs = ref([])
	const fengjiChartRefs = ref([])
	const yasuojiChartRefs = ref([])

	const setMenChartRef = (el, index) => {
		if (el) {
			menChartRefs.value[index] = el
		}
	}

	const setFengjiChartRefs = (el, index) => {
		if (el) {
			fengjiChartRefs.value[index] = el
		}
	}

	const setYasuojiChartRefs = (el, index) => {
		if (el) {
			yasuojiChartRefs.value[index] = el
		}
	}

	onBeforeUpdate(() => {
		menChartRefs.value = []
		fengjiChartRefs.value = []
		yasuojiChartRefs.value = []
	})


	const toStup2 = (index) => {
		currentOption.value = { index: index, name: stup1Option.value[index].name };

		getInfo(index, null);
	}

	const getInfo = (index, item) => {

		menKeys.value = [];
		menInfo.value = [];
		fengjiInfo.value = [];
		fengjiKeys.value = [];
		wenduKeys.value = [];
		wenduInfo.value = [];
		yasuojiKeys.value = [];
		yasuojiInfo.value = [];

		menStat.value = { shichang: 0, cishu: 0 };
		fengjiStat.value = { huashuang: 0, zhileng: 0 };
		yasuojiStat.value = { shichang: 0, cishu: 0 };
		switch (index) {
			// 20冷库 24门 26风机 21温度
			case 0:
				deviceList.value = homeStore.projectModus[20];
				if (item) {
					deviceInfo.value = item;
				} else {
					deviceInfo.value = deviceList.value[0];
				}

				// 对应 门 信息
				if (homeStore.projectModus[24] && homeStore.projectModus[24].length) {
					homeStore.projectModus[24].forEach(item => {
						if (deviceInfo.value.id == item.pid) {
							menKeys.value.push(`24_${item.uri}_${item.id}_0`);

							let men = { name: item.name, keys: [`24_${item.uri}_${item.id}_0`] };
							menInfo.value.push(men);
						}
					})
					if (menKeys.value.length > 0) {
						getMenInfo();
					}
				}

				//对应 风机 信息
				if (homeStore.projectModus[26] && homeStore.projectModus[26].length) {
					homeStore.projectModus[26].forEach(item => {
						if (deviceInfo.value.id == item.pid) {
							//制冷
							fengjiKeys.value.push(`26_${item.uri}_${item.id}_0`);
							//化霜
							fengjiKeys.value.push(`26_${item.uri}_${item.id}_1`);

							let fengji = { name: item.name, keys: [`26_${item.uri}_${item.id}_0`, `26_${item.uri}_${item.id}_1`] };
							fengjiInfo.value.push(fengji);
						}
					})
					if (fengjiKeys.value.length > 0) {
						getFengJiInfo();
					}
				}

				//对应 温度 信息
				if (homeStore.projectModus[21] && homeStore.projectModus[21].length) {
					homeStore.projectModus[21].forEach(item => {
						if (deviceInfo.value.id == item.pid) {
							wenduKeys.value.push(`21_${item.uri}_${item.id}_0`);

							let men = { name: `${item.name}`, keys: [`21_${item.uri}_${item.id}_0`] };
							wenduInfo.value.push(men);
						}
					})
					if (wenduKeys.value.length > 0) {
						getWenDuInfo();
					}
				}

				break;
			// 40机组 压缩机
			case 1:
				deviceList.value = homeStore.projectModus[40];
				if (item) {
					deviceInfo.value = item;
				} else {
					deviceInfo.value = deviceList.value[0];
				}
				//对应 压缩机 信息
				if (homeStore.projectModus[41] && homeStore.projectModus[41].length) {
					homeStore.projectModus[41].forEach(item => {
						if (deviceInfo.value.id == item.pid) {
							yasuojiKeys.value.push(`41_${item.uri}_${item.id}_0`);

							let yasuoji = { name: item.name, keys: [`41_${item.uri}_${item.id}_0`] };
							yasuojiInfo.value.push(yasuoji);
						}
					})
					if (yasuojiKeys.value.length > 0) {
						getYaSuoJiInfo();
					}
				}
				break
		}
	}

	const getMenInfo = async () => {
		let menResults = await dataApi.getSisSwitchsTimeSlot({ unit: 0, keys: menKeys.value, startTime: currentTime.value + " 00:00:00", endTime: currentTime.value + " 23:59:59" })
		menInfo.value.forEach(item => {
			let key0 = item.keys[0]
			if (menResults[key0]) {
				item.stat = [];
				if (menResults[key0].close && menResults[key0].close.length) {
					menResults[key0].close.forEach(closeItem => {
						//0关闭
						item.stat.push({ key: kaiguanTypes.value[0].type, data: closeItem })
					})
				}
				if (menResults[key0].open && menResults[key0].open.length) {
					menResults[key0].open.forEach(openItem => {
						//0开启
						item.stat.push({ key: kaiguanTypes.value[1].type, data: openItem })
					})
				}
				menStat.value.shichang = formatDecimal(Number(menStat.value.shichang) + Number(menResults[key0].t));
				menStat.value.cishu = formatDecimal(Number(menStat.value.cishu) + Number(menResults[key0].c));
				item.t = menResults[key0].t;
				item.c = menResults[key0].c;
				//按开始时间排序
				item.stat.sort((a, b) => a.data[0] - b.data[0])
				item.datas = menResults[key0].datas;
			}
		})
		menChartRefs.value.forEach(item => {
			item.initChart();
		})
		uni.hideLoading();
	}

	const getFengJiInfo = () => {

		dataApi.getSisSwitchsTimeSlot({ keys: fengjiKeys.value, startTime: currentTime.value + " 00:00:00", endTime: currentTime.value + " 23:59:59" }).then(fengjiResults => {

			// fengjiInfo.value = [fengjiInfo.value[0]];
			fengjiInfo.value.forEach(item => {
				let key0 = item.keys[0]
				let key1 = item.keys[1]
				item.stat = [];
				//制冷
				if (fengjiResults[key0]) {
					if (fengjiResults[key0].close && fengjiResults[key0].close.length) {
						fengjiResults[key0].close.forEach(closeItem => {
							//2待机
							item.stat.push({ key: fengjiTypes.value[2].type, data: closeItem })
						})
					}
					if (fengjiResults[key0].open && fengjiResults[key0].open.length) {
						fengjiResults[key0].open.forEach(openItem => {
							//1制冷
							item.stat.push({ key: fengjiTypes.value[1].type, data: openItem })
						})
					}
					item.data0 = fengjiResults[key0].datas;
					item.zlsc = fengjiResults[key0].t.toFixed(2);
					fengjiStat.value.zhileng = formatDecimal(Number(fengjiStat.value.zhileng) + Number(fengjiResults[key0].t.toFixed(2)));
				}
				//化霜
				if (fengjiResults[key1]) {
					if (fengjiResults[key1].close && fengjiResults[key1].close.length) {
						fengjiResults[key1].close.forEach(closeItem => {
							//2待机
							item.stat.push({ key: fengjiTypes.value[2].type, data: closeItem })
						})
					}
					if (fengjiResults[key1].open && fengjiResults[key1].open.length) {
						fengjiResults[key1].open.forEach(openItem => {
							// //0化霜
							item.stat.push({ key: fengjiTypes.value[0].type, data: openItem })
						})
					}
					item.data1 = fengjiResults[key1].datas;
					item.hssc = fengjiResults[key1].t.toFixed(2);
					fengjiStat.value.huashuang = formatDecimal(Number(fengjiStat.value.huashuang) + Number(fengjiResults[key1].t.toFixed(2)));
				}
				if (item.stat && item.stat.length) {
					//按开始时间排序
					item.stat.sort((a, b) => a.data[0] - b.data[0]);
				}
			})
			// uni.$emit('stat-initChart')
			fengjiChartRefs.value.forEach(item => {
				item.initChart();
			})
			uni.hideLoading();
		})

	}

	function uniqueByProp(array) {
		return array.filter((item, index, self) =>
			index === self.findIndex(obj => { obj.data[0] === item.data[0] })
		)
	}

	const getWenDuInfo = () => {
		dataApi.getSisValues({ keys: wenduKeys.value, startTime: currentTime.value + " 00:00:00", endTime: currentTime.value + " 23:59:59" }).then(results => {
			wenduInfo.value.forEach(item => {
				let key0 = item.keys[0]
				if (results[key0]) {
					item.datas = results[key0].datas;
				}
			})
			uni.$emit('stat-data-initChart')
		})
	}

	const getYaSuoJiInfo = () => {
		dataApi.getSisSwitchsTimeSlot({ keys: yasuojiKeys.value, startTime: currentTime.value + " 00:00:00", endTime: currentTime.value + " 23:59:59" }).then(yasuojiResults => {
			yasuojiInfo.value.forEach(item => {
				let key0 = item.keys[0]
				if (yasuojiResults[key0]) {
					item.stat = [];
					if (yasuojiResults[key0].close && yasuojiResults[key0].close.length) {
						yasuojiResults[key0].close.forEach(closeItem => {
							//0关闭
							item.stat.push({ key: kaiguanTypes.value[0].type, data: closeItem })
						})
					}
					if (yasuojiResults[key0].open && yasuojiResults[key0].open.length) {
						yasuojiResults[key0].open.forEach(openItem => {
							//0开启
							item.stat.push({ key: kaiguanTypes.value[1].type, data: openItem })
						})
					}

					item.t = yasuojiResults[key0].t.toFixed(2);
					item.c = yasuojiResults[key0].c;
					yasuojiStat.value.shichang = formatDecimal(Number(yasuojiStat.value.shichang) + Number(yasuojiResults[key0].t.toFixed(2)));
					yasuojiStat.value.cishu = formatDecimal(Number(yasuojiStat.value.cishu) + Number(yasuojiResults[key0].c));
					//按开始时间排序
					item.stat.sort((a, b) => a.data[0] - b.data[0])
					item.datas = yasuojiResults[key0].datas;
				}
			})
			// uni.$emit('stat-initChart')
			yasuojiChartRefs.value.forEach(item => {
				item.initChart();
			})
			uni.$emit('stat-data-initChart');
			uni.hideLoading();
		})
	}

	const handleDevChange = (item) => {
		toStup2(item.index)
	}

	const isOpen = ref(false)
	const popup = ref()
	const deviceInfo = ref({ name: "", id: "" })
	const deviceList = ref([])

	const handleOpen = () => {
		isOpen.value = true;
		popup.value.open();
	}

	// 设施类型选中
	const handleTypeChange = (item) => {
		isOpen.value = false;
		popup.value.close();
		deviceInfo.value = item;
		getInfo(currentOption.value.index, item);
	}

	const currentTime = ref(proxy.dayjs().format('YYYY-MM-DD'))

	const handleDateChange = (e) => {
		currentTime.value = e;
		getInfo(currentOption.value.index, deviceInfo.value);
	}

	const getDurationBySeconds = (s) => {
		let hours = Math.floor(s / 3600);
		let minutes = Math.floor((s % 3600) / 60);
		let seconds = Math.floor((s % 60));

		let time = "";
		if (hours > 0) {
			time = `${hours}时${minutes}分${seconds}秒`
		} else if (minutes > 0) {
			time = `${minutes}分${seconds}秒`
		} else {
			time = `${seconds}秒`
		}
		return time;
	}

	function formatDecimal(num) {
		return num ? parseFloat(num.toFixed(2)) : 0;
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		background-color: #F6F7FA;

		.main-cont {
			padding-bottom: 10px;
			box-sizing: border-box;

			.stup1-cont {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 30rpx;
				padding: 30rpx;

				.option-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 25rpx;
					border-radius: 10rpx;
					background: linear-gradient(180deg, rgba(238, 240, 249, 1) 0%, rgba(249, 249, 252, 1) 100%);
					border: 2rpx solid #FFFFFF;
					box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(95, 131, 249, 0.1);

					.option-item-icon {
						padding: 20rpx;
						font-size: 40rpx;
						background-color: rgba(255, 255, 255, 0.3);
						border: 2rpx solid #FFFFFF;
						border-radius: 5rpx;
						color: $theme-color;
					}

					.option-item-name {
						margin-left: 25rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: $theme-color;
					}
				}
			}

			.stup2-cont {

				.project-select {
					height: 40px;
					line-height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: transparent;
					border-bottom: 1px solid #ccc;

					.project-name {
						color: #666;
						font-size: 14px;
					}

					.project-arrow {
						padding-left: 10px;
						width: 16px;
						height: 16px;
					}
				}

				.datetime-cont {
					margin-top: 20rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(135, 166, 233, 0.1);
					border: 2rpx solid #FFFFFF;
					border-radius: 10rpx;
				}

				.chan-item {
					margin-top: 20rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					background-color: #FFFFFF;
					box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(135, 166, 233, 0.1);
					border: 2rpx solid #FFFFFF;
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					padding: 25rpx;

					.chan-item-name {
						color: #333;
						font-weight: 600;
						font-size: 28rpx;
					}

					.chan-item-stat {
						// margin-left: 40rpx;
						// margin-right: 40rpx;
						margin-top: 20rpx;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						// gap: 20rpx;
					}

					.chan-item-stat-item {
						margin-left: 40rpx;
						display: flex;
						flex-direction: row;

						.chan-item-stat-item-name {
							font-size: 22rpx;
							color: #999;
						}

						.chan-item-stat-item-value {
							font-size: 22rpx;
							color: #666;
						}
					}

					.chan-item-stat-chart {
						position: relative;
						top: -155rpx;
					}

					.chan-item-stat-dev {
						display: flex;
						flex-direction: column;
						border-radius: 5rpx;
						background-color: #F7F9FF;
						padding-top: 20rpx;
						margin-top: 20rpx;
						height: 240rpx;

						.chan-item-stat-dev-name {
							color: #666666;
							font-size: 25rpx;
							width: 100%;
							text-align: center;
						}

						.chan-item-legend {
							margin-top: 25rpx;
							display: flex;
							width: 100%;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.chan-item-legend-item {
								margin-left: 20rpx;
								margin-right: 20rpx;
								display: flex;
								flex-direction: row;
								align-items: center;

								.chan-item-legend-name {
									font-size: 22rpx;
									color: #333;
								}

								.chan-item-legend-icon {
									border-radius: 3rpx;
									width: 20rpx;
									height: 15rpx;
									margin-left: 5rpx;
								}

							}
						}
					}
				}
			}
		}

		.popup-cont {
			background: #fff;
			max-height: 80vh;
			z-index: 102;

			.popup-title,
			.popup-header {
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 14px;
				text-align: center;
				border-top: 1px solid #eee;
			}

			.popup-header {
				font-size: 16px;
				font-weight: 600;
			}
		}


		::v-deep .icon-calendar {
			margin-left: 25rpx;
		}

		::v-deep .uni-date__x-input {
			margin-left: 25rpx;
		}
	}
</style>